<script setup>
import ComSide from '@/components/ComSide.vue';
</script>

<template>
  <el-container></el-container>
    <el-aside width="200px">
      <ComSide></ComSide>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <RouterView/>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  

</template>
<style scoped>
.el-container{
  width:100%;
  height:100%;
} 
.el-container .el-header,
.el-container .el-footer {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.el-container  .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.el-container  .el-menu {
  border-right: none;
}
.el-container  .el-main {
  padding: 0;
}
.el-container  .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
